<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>欢迎</title>
    <link type="text/css" rel="stylesheet" href="/css/all.css"/>
    <script language="javascript" src="/js/all.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <!--头部条-->
    <span id="header"></span>
    <!-- 左侧菜单 -->
    <span id="left"></span>
    <!--内容-->
    <div class="content-wrapper">
        <!-- 标题和路径 -->
        <section class="content-header">
            <h1>对接应用<small> 第三方开发者应用管理</small></h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-desktop"></i> 开放平台</a></li>
                <li><i class="fa fa-server"></i> 对接应用</li>
            </ol>
        </section>
        <!-- 内容体 -->
        <section class="content">
            <div class="list-input-container hide-input">
                <div class="input-box">
                    <div id="box-input" class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">对接应用详细信息</h3>
                            <div class="box-tools pull-right">
                                <button id="btn-close" type="button" class="btn btn-box-tool" title="关闭">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="box-body">
                            <form id="form-input">
                                <div class="form-group"><label>应用ID</label><input class="form-control" name="clientId"></div>
                                <div class="form-group"><label>应用KEY</label><input class="form-control" name="clientSecret"></div>
                                <div class="form-group"><label>回调地址</label><input class="form-control" name="clientSecret"></div>
                                <div class="form-group"><label>授权范围</label><input class="form-control" name="grantType"></div>
                            </form>
                        </div>
                        <div class="box-footer">
                            <div class="pull-left">
                                <button id="btn-delete" type="button" class="btn btn-danger pull-left">删除</button>
                            </div>
                            <div class="pull-right">
                                <button id="btn-save" type="button" class="btn btn-primary">保存</button>
                                <button id="btn-cancel" type="button" class="btn btn-default">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list-box">
                    <div id="box-list" class="box box-primary">
                        <div class="box-header with-border hidden"></div>
                        <div class="box-body">
                            <div id="table-toolbar">
                                <button id="btn-new" type="button" class="btn btn-primary">建立应用</button>
                            </div>
                            <table id="data-table" data-toggle="table" data-classes="table table-hover" data-striped="true" data-pagination="true"
                                   data-show-columns="true" data-show-refresh="true" data-show-toggle="true" data-minimum-count-columns="3"
                                   data-single-select = "true" data-click-to-select="false" data-side-pagination="server" data-locale="zh_CN" data-query-params-type="other"
                                   data-row-style = "tableRowStyle"
                                   data-search = "true" data-search-on-enter-key = "true"
                                   data-id-field="clientId" data-unique-id="clientId" data-toolbar="#table-toolbar"
                                   data-url="#" data-method="get" data-query-params="tableQueryParams"
                                   data-data-field="records" data-total-field="recordCnt">
                                <thead>
                                <tr>
                                    <th data-field="state" data-radio="true" data-visible="false"></th>
                                    <th data-field="clientId" data-align="left" data-halign="left" data-valign="middle" data-sortable="true">应用ID</th>
                                    <th data-field="clientSecret" data-align="left" data-halign="left" data-valign="middle" data-sortable="true">应用KEY</th>
                                    <th data-field="redirectUrl" data-align="left" data-halign="left" data-valign="middle" data-sortable="true">回调地址</th>
                                    <th data-field="grantType" data-align="left" data-halign="left" data-valign="middle" data-sortable="true">认证模式</th>
                                    <th data-field="grantScope" data-align="left" data-halign="left" data-valign="middle" data-sortable="true">授权范围</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- 底部 -->
    <span id="footer"></span>
    <!-- 右侧弹出侧边栏 -->
    <span id="right"></span>
</div>
</body>
<script type="application/javascript">
    var tableQueryParams = function(params) {
        return {
            pageNumber: params.pageNumber,
            pageSize: params.pageSize,
            sortName: params.sortName,
            sortOrder: params.sortOrder,
            keywords: params.searchText
        }
    };

    var tableRowStyle = function (row, index) {
        return {
            classes:"",
            css: {"cursor": "pointer"}
        };
    };

    var showInputBox = function() {
        if ($(".list-input-container").hasClass("hide-input") === true) {
            $(".list-input-container").removeClass("hide-input");
        }
    };

    var hideInputBox = function() {
        if ($(".list-input-container").hasClass("hide-input") === false) {
            $(".list-input-container").addClass("hide-input");
        }
    };

    var clearInputBox = function () {
        $("#form-input :input").not(":checkbox").each(function (){
            $(this).val("");
        });
    };

    var fillInputBox = function (data) {
        $("#form-input :input").not(":checkbox").each(function (){
            $(this).val(data[$(this).attr("name")]);
        });
    };

    var checkInputData = function () {
        var rtn = true;
        $("#form-input :input").not(":checkbox").each(function () {
            if ($(this).parent().hasClass("hide") === false) {
                var fieldValue = $(this).val();
                var fieldCaption = $(this).prev().html();
                if (fieldValue === undefined || fieldValue === "") {
                    Lobibox.notify("error", {title: "错误", msg: "请填写" + fieldCaption});
                    rtn = false;
                }
            }
        });
        return rtn;
    };

    var scopeFormate = function (value, row ,index) {
        var scopes = "";
        for (var i = 0; i < row.sc; i++) {

        }
    };

    $("#data-table").attr("data-url", urls.backend.oauth2Server.list);

    $('#data-table').on("click-row.bs.table", function (e, row, $element, field) {
        fillInputBox(row);
        showInputBox();
    });

    $("#btn-new").click(function () {
        clearInputBox();
        showInputBox();
    });

    $("#btn-close, #btn-cancel").click(function () {
        hideInputBox();
    });

    $("#btn-save").click(function () {
        if (checkInputData() === false) {
            return;
        }
        var data = {};
        $("#form-input :input").each(function () {
            var fieldName = $(this).attr("name");
            data[fieldName] = $(this).val();
        });
        ajax.doAjax({
            type: "PATCH",
            url: urls.backend.manager.serviceManager.save,
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function () {
                hideInputBox();
                $("#data-table").bootstrapTable("refresh");
            }
        });
    });

    $("#btn-deploy").click(function () {
        var serviceId = $("input[name=serviceId]").val();
        if (serviceId == undefined || serviceId == "") {
            Lobibox.notify("error", {title: "错误", msg: "当前服务名称为空，无法执行此操作"});
            return;
        }
        ajax.doAjax({
            type: "POST",
            url: urls.backend.manager.serviceManager.deploy.replace("{serviceId}", serviceId).replace("{branch}", "master"),
            success: function () {
                Lobibox.notify("success", {title: "成功", msg: "服务已重新部署"});
            }
        });
    });

    $("#btn-deploy-log").click(function () {
        var serviceId = $("input[name=serviceId]").val();
        if (serviceId == undefined || serviceId == "") {
            Lobibox.notify("error", {title: "错误", msg: "当前服务名称为空，无法执行此操作"});
            return;
        }
        window.location.href = urls.front.manager.serviceManager.toDeployHistory + "?serviceId=" + serviceId;
    });

</script>
</html>
